<template>
  <section class="org">
    <aside>
      <ul>
        <li :class="{active:nav==='user'}" @click="nav='user'">成员设置</li>
        <li :class="{active:nav==='org'}" @click="nav='org'">组织设置</li>
      </ul>
    </aside>
    <div class="container">
      <div class="orgBox" v-show="nav==='org'">
        <div class="w300" v-for="(item,key,index) in orgData" :key="key">
          <h3>{{item.name}}：</h3>
          <div class="cont">
            <ul>
              <li v-for="(itm) in item.data" :key="itm.id">
                <el-input placeholder="请输入内容" v-model="itm.name" size="mini" clearable @change="renew(itm.id,itm.name)">
                  <template slot="append">
                    <el-button size="mini" @click="del(itm.id)" title="删除">×</el-button>
                  </template>
                </el-input>
                <ul>
                  <li v-if="t in item.data">
                    <el-input placeholder="请输入内容" v-model="t.name" size="mini" clearable @change="renew(t.id,t.name)">
                      <template slot="append">
                        <el-button size="mini" @click="del(t.id)" title="删除">×</el-button>
                      </template>
                    </el-input>
                  </li>
                </ul>
              </li>
              <li class="add">
                <el-input placeholder="请输入内容" size="mini" v-model="addTemp[index]">
                  <template slot="append">
                    <el-button size="mini" @click="add(item.id,index)" title="新增">+</el-button>
                  </template>
                </el-input>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="userBox" v-show="nav==='user'">
        <TableList :list="list" :column="column">
          <div slot="option" class="noBlueBg">
            <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="options.username" clearable placeholder="请输入用户名" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="trueName">
                <el-input v-model="options.trueName" clearable placeholder="请输入姓名" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="options.mobile" clearable placeholder="请输入手机号码" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="company">
                <el-input v-model="options.company" clearable placeholder="请输入单位" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="部门" prop="department">
                <el-input v-model="options.department" clearable placeholder="请输入单位" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="群组" prop="groups">
                <el-input v-model="options.groups" clearable placeholder="请输入群组" size="mini"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="loadList"><span class="el-icon el-icon-search"></span> 查询
                </el-button>
                <el-button size="mini" @click="resetOption('optionForm')"><span
                  class="el-icon el-icon-refresh-left"></span> 重置
                </el-button>
              </el-form-item>
              <el-form-item class="floatRight">
                <el-button size="mini" type="success" @click="addUser"><span class="el-icon el-icon-plus"></span>新增
                </el-button>
                <el-button size="mini" type="warning" @click="downloadTab"><span
                  class="el-icon el-icon-download"></span>下载成员表模板
                </el-button>
                <el-button size="mini" type="warning" @click="importTab"><span class="el-icon el-icon-upload2"></span>导入成员表
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="page noBlueBg" slot="bottom">
            <el-pagination
              @size-change="changeSize"
              @current-change="changePage"
              :page-sizes="[20, 50, 100, 200]"
              :current-page="page"
              :page-size="limit"
              layout="sizes,total,prev, pager, next, jumper"
              :total="totals">
            </el-pagination>
          </div>
        </TableList>

      </div>
      <Dialog :cfg="dialogCfg" ref="dialog">
        <el-form :model="editUserData" label-width="80px" :inline="true" :rules="rules" ref="addForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editUserData.username" clearable placeholder="请输入用户名" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="trueName">
            <el-input v-model="editUserData.trueName" clearable placeholder="请输入姓名" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="editUserData.mobile" clearable placeholder="请输入手机号码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="company">
            <el-input v-model="editUserData.company" clearable placeholder="请输入单位" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input v-model="editUserData.department" clearable placeholder="请输入部门" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="post">
            <el-input v-model="editUserData.post" clearable placeholder="请输入岗位" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="群组" prop="groups">
            <el-input v-model="editUserData.groups" clearable placeholder="请输入群组" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </Dialog>
    </div>

  </section>
</template>

<script>
  import TableList from 'comp/common/TableList';
  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "Org",
    components: {
      Dialog,
      TableList
    },
    data() {
      return {
        nav: 'user',
        addTemp: ['', ''],
        orgData: {},

        tabHeight: 0,
        options: {
          username: '',
          trueName: '',
          mobile: '',
          unit: '',
          department: '',
          groups: ''

        },
        list: [],
        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,
        column: [
          {
            prop: 'username',
            label: '用户名'
          },
          {
            prop: 'trueName',
            label: '姓名'
          },
          {
            prop: 'mobile',
            label: '手机号码'
          },
          {
            prop: 'company',
            label: '单位'
          },

          {
            prop: 'department',
            label: '部门'
          },
          {
            prop: 'post',
            label: '岗位'
          },
          {
            prop: 'groups',
            label: '群组'
          },
          {
            prop: '',
            label: '操作',
            btn: 'editAndDel',
            del: (id) => {
              this.delUser(id)
            },
            edit: (data) => {
              this.editUser(data)
            }
          }
        ],
        dialogCfg: {},
        editUserData: {
          username: '',
          realName: '',
          password: '',
          mobile: '',
          unit: '',
          department: '',
          post: '',
          groups: '',
          status: true
        },
        rules: {
          trueName: [
            {required: true, message: '请输入姓名', trigger: 'change'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'change'}
          ],
          mobile: [
            {required: true, message: '请输入手机号码', trigger: 'change'}
          ],
          company: [
            {required: true, message: '请输入单位', trigger: 'change'}
          ],
          department: [
            {required: true, message: '请输入部门', trigger: 'change'}
          ],
          post: [
            {required: true, message: '请选择岗位', trigger: 'change'}
          ]
        }

      }
    },
    mounted() {
      this.loadOrgList();
      this.loadList();
    },
    methods: {
      loadOrgList() {
        this.$server('org.list').then(data => {
          const unitName = this.$kkui.cache.get('unit');
          let orgData = {};
          let selfID = '', linkID = '';
          data.filter(item => item.pid === 0).forEach(item => {
            if (item.name === '公路中心' || item.name === unitName) {
              orgData.selfList = {
                name: unitName,
                id: item.id,
                data: []
              };
              selfID = item.id;
            } else {
              orgData.linkList = {
                name: '联动单位',
                id: item.id,
                data: []
              };
              linkID = item.id;
            }
          });

          data.forEach(item => {
            if (item['pid'] === selfID) {
              orgData.selfList.data.push({
                name: item.name,
                id: item.id,
                pid: item.pid
              })
            }
            if (item['pid'] === linkID) {
              orgData.linkList.data.push({
                name: item.name,
                id: item.id,
                pid: item.pid
              })
            }
          });
          this.$kkui.loading_deepBlue.hide();
          this.orgData = orgData;
        })
      },

      renew(id, name) {
        this.$server('org.renewOrg',{
          id, name
        }).then(data => {
          this.loadOrgList();
        }).catch(err => {
          this.loadOrgList();
        })
      },

      add(pid, index) {
        if (this.addTemp[index]) {
          this.$server('org.addOrg',{
            pid,
            name: this.addTemp[index]
          }).then(data => {
            this.loadOrgList();
            this.addTemp[index] = '';
          })
        } else {
          this.$kkui.msg({
            icon: 0,
            cont: '内容不能为空！',
            time: 1000
          })
        }
      },
      del(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此单位吗？',
          callback: () => {
            this.$server('org.delOrg',id).then(data => {
              this.loadOrgList();
            })
          }
        });

      },


      //加载列表
      loadList() {
        this.$server('org.userList',{
          limit: this.limit,
          page: this.page,
          ...this.options
        }).then(data => {
          this.list = data['rows'].map(item => {
            return {
              ...item,
              status: item['status'] === '1',
            }
          });
          this.totals = data['total'];
          this.$kkui.loading_deepBlue.hide();
        })
      },

      //新增用户
      addUser() {
        this.rules.password[0].required = true;
        this.dialogCfg = {
          title: '新增用户',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 430,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$server('org.addUser',this.editUserData).then(data => {
                  this.loadList();
                  this.$kkui.msg({
                    icon:1,
                    cont:'新增成功！'
                  });
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },

      //编辑用户
      editUser(data) {
        this.editUserData = {...data};
        this.rules.password[0].required = false;
        this.dialogCfg = {
          title: '编辑用户',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 430,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$server('org.renewUser',{
                  ...this.editUserData,
                  status: this.editUser.status ? '1' : '0'
                }).then(data => {
                  this.loadList();
                  this.$kkui.msg({
                    icon:1,
                    cont:'编辑成功！'
                  });
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },

      //删除用户
      delUser(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此用户吗？',
          callback: () => {
            this.$server('org.delUser',[id * 1]).then(data => {
              this.loadList();
            })
          }
        });
      },

      initEditData(){
        this.editUserData= {
          username: '',
          realName: '',
          password: '',
          mobile: '',
          unit: '',
          department: '',
          post: '',
          groups: '',
          status: true
        }
      },

      // 下载模板
      downloadTab() {
        const index = this.$kkui.loading.show();
        this.$server('org.userTemplate',{
          tempalteName: 'user'
        }).then(data => {
          const a = document.createElement('a');
          a.href = data;
          a.style.display = 'none';
          a.target = '_blank';
          a.download = '用户表' + '.xls';
          a.click();
          setTimeout(() => {
            this.$kkui.loading.hide(index);
          }, 3000)
        })
      },

      //导入用户表
      importTab() {
        this.$kkui.submit({
          title: '上传用户表格',
          file: true,
          cont: '1'
        }, formData => {
          this.$kkui.alert({
            icon: 0,
            cont: '导入表格将会替换掉相同手机号或用户名的数据，确定吗？',
            callback: () => {
              this.$server('org.importUserTable',formData).then(data => {
                this.$kkui.msg({
                  icon:1,
                  cont:'操作成功！'
                });
              })
            }
          })
        })
      },


      //切换分页
      changePage(page) {
        this.page = page;
        this.loadList();
      },

      changeSize(limit) {
        this.limit = limit;
        this.loadList();
      },

      // 重置option
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadList();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";

  .orgBox {
    display: flex;
    justify-content: center;
    gap: 200px;


    h3 {
      margin-bottom: 10px;
      margin-top: 150px;
    }

    .cont {
      border-left: 1px dashed #ccc;
      margin-left: 5px;
    }

    ul {

      li {
        display: flex;
        position: relative;
        margin: 5px 0 5px 35px;
        width: 200px;
      }

      li::after {
        content: '';
        border-bottom: 1px dashed #ccc;
        position: absolute;
        width: 30px;
        height: 1px;
        left: -35px;
        top: 12px;
      }
    }

    /deep/ .el-input-group__append, .el-input-group__prepend {
      background-color: rgba(182, 145, 37, .8);
      color: #fff;
      opacity: .8;

      button {
        font-size: 16px;
      }
    }

    .add {
      /deep/ .el-input-group__append, .el-input-group__prepend {
        background-color: #03AAD3;
      }
    }

    /deep/ .el-input-group__append:hover, .el-input-group__prepend:hover {
      opacity: 1;
    }
  }


</style>
